<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>河南省八市 动态拼接</title>
  <style>
    body { text-align:center; margin:20px; font-family:sans-serif; }
    #controls { margin-bottom:10px; }
    #controls button,
    #controls input { margin:0 5px; padding:6px 12px; font-size:14px; }
    #canvas {
      position: relative;
      margin: 0 auto;
      background: #f5f5f5;
      border: 1px solid #ccc;
      overflow: visible;
    }
    #canvas img {
      position: absolute;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
  </style>
</head>
<body>

  <div id="controls">
    <button id="play">▶ 播放</button>
    <button id="pause">❚❚ 暂停</button>
    <input id="seek" type="range" min="0" max="7" value="0">
  </div>

  <div id="canvas"></div>

  <script>
    // 1. 从 layout.html 导出的坐标和尺寸
    const data = {
      "jiaozuo":      { "x": 331, "y":  37, "width": 243, "height": 243 },
      "xinxiang":     { "x": 502, "y": -10, "width": 348, "height": 297 },
      "kaifeng":      { "x": 614, "y": 166, "width": 288, "height": 260 },
      "luoyang":      { "x":  99, "y": 192, "width": 327, "height": 329 },
      "zhengzhou":    { "x": 380, "y": 204, "width": 300, "height": 179 },
      "xuchang":      { "x": 447, "y": 345, "width": 249, "height": 192 },
      "pingdingshan": { "x": 293, "y": 363, "width": 270, "height": 272 },
      "luohe":        { "x": 530, "y": 445, "width": 150, "height": 125 }
    };

    // 2. 顺序数组
    const ids = Object.keys(data);
    let current = 0, timer = null;

    // 3. 动态创建 <img> 并加入画布
    const canvas = document.getElementById('canvas');
    ids.forEach(id => {
      const img = document.createElement('img');
      img.id = id;
      img.src = `images/${id}.png`;
      canvas.appendChild(img);
    });

    // 4. 页面加载后，自动计算画布大小并显示第0帧
    window.addEventListener('load', () => {
      let maxX = 0, maxY = 0;
      ids.forEach(id => {
        const { x, y, width, height } = data[id];
        maxX = Math.max(maxX, x + width);
        maxY = Math.max(maxY, y + height);
      });
      canvas.style.width  = (maxX + 20) + 'px';
      canvas.style.height = (maxY + 20) + 'px';
      showAt(0);
    });

    // 5. 显示至第 idx 帧
    function showAt(idx) {
      ids.forEach((id, i) => {
        const img = document.getElementById(id);
        if (i <= idx) {
          const { x, y, width, height } = data[id];
          img.style.left   = x + 'px';
          img.style.top    = y + 'px';
          img.style.width  = width  + 'px';
          img.style.height = height + 'px';
          img.style.opacity = 1;
        } else {
          img.style.opacity = 0;
        }
      });
      document.getElementById('seek').value = idx;
    }

    // 6. 播放 / 暂停 / 进度条 绑定
    document.getElementById('play').onclick = () => {
      clearInterval(timer);
      timer = setInterval(() => {
        if (current < ids.length - 1) {
          current++;
          showAt(current);
        } else {
          clearInterval(timer);
        }
      }, 800);
    };
    document.getElementById('pause').onclick = () => clearInterval(timer);
    document.getElementById('seek').oninput = e => {
      clearInterval(timer);
      current = +e.target.value;
      showAt(current);
    };
  </script>

</body>
</html>
